<template>
  <el-config-provider :locale="currentLocale">
    <!-- 根据设备类型渲染不同的布局 -->
    <component :is="currentLayout" />
  </el-config-provider>
</template>

<script lang="ts">
import { deviceDetection } from "@pureadmin/utils";
import { useDevice } from "@/utils/useDeviceDetect/useDeviceDetect";
import { defineComponent, computed, onMounted, watch } from "vue";
import { ElConfigProvider } from "element-plus";
import { ReDialog } from "@/components/ReDialog";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import plusEn from "plus-pro-components/es/locale/lang/en";
import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";

// 导入不同设备的布局组件
import desktopLayout from "@/layout/desktopLayout.vue";
import mbileLayout from "@/layout/mbileLayout.vue";

export default defineComponent({
  name: "app",
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
    ReDialog,
    mbileLayout,
    desktopLayout
  },
  setup() {
    const isMobile = deviceDetection();

    // 计算属性：根据设备类型返回当前应该渲染的布局组件
    const currentLayout = computed(() => {
      return isMobile ? mbileLayout : desktopLayout;
    });

    // 监听设备类型变化
    watch(isMobile, newValue => {
      console.log("设备类型已变更为:", newValue);
      // 这里可以添加设备类型变化时的额外逻辑
    });

    return {
      isMobile,
      currentLayout
    };
  },
  computed: {
    currentLocale() {
      return this.$storage.locale?.locale === "zh"
        ? { ...zhCn, ...plusZhCn }
        : { ...en, ...plusEn };
    }
  }
});
</script>
